<template>
    <div class="app-container">
        <div class="bg-container">
            <!-- form表单 -->
            <el-form :model="form" ref="formRef" label-width="120px" label-suffix="：" label-position="left">
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-form-item label="告警规则名称">
                            <el-input v-model="form.ruleName" placeholder="请输入告警规则名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="告警规则描述">
                            <el-input v-model="form.description" placeholder="请输入告警规则描述"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态">
                            <el-radio-group v-model="form.status">
                                <el-radio :value="0">关闭</el-radio>
                                <el-radio :value="1">开启</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="margin-bottom: 18px;">
                        <el-button icon="Search" type="primary" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-col>
                    <el-col :span="24" style="margin-bottom: 18px;">
                        <el-button icon="Plus" plain type="primary" @click="handleAdd">新增
                        </el-button>
                        <el-button :disabled="multiple" icon="Delete" plain type="danger" @click="handleDeleteList">删除
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>
            <!-- table表格 -->
            <el-table :data="tableData" v-loading="loading" border style="width: 100%;" show-overflow-tooltip
                @selection-change="handleSelectionChange" height="400px">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="告警规则名称" align="center" prop="ruleName"></el-table-column>
                <el-table-column label="告警规则描述" align="center" prop="description"></el-table-column>
                <el-table-column label="告警严重性" align="center" prop="severity"></el-table-column>
                <el-table-column label="触发告警条件" align="center" prop="cond"></el-table-column>
                <el-table-column label="创建时间" width="180" align="center" prop="createTime">
                    <template #default="scope">
                        {{ parseTime(scope.row.createTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" prop="status">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status" type="success">开启</el-tag>
                        <el-tag v-else type="danger">关闭</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="180">
                    <template #default="scope">
                        <el-button circle icon="Edit" plain type="primary" @click="handleUpdate(scope.row)">
                        </el-button>
                        <el-button circle icon="Delete" plain type="danger" @click="handleDelete(scope.row)">
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pageInfo.pageNo" v-model:page-size="pageInfo.pageSize"
                :page-sizes="[3, 5, 7, 10]" :total="pageInfo.total" layout="total, sizes, prev, pager, next, jumper"
                style="margin-top: 20px; justify-content: flex-end" @size-change="bindPageSizeChange"
                @current-change="binfPageNoChange" />
        </div>

        <m-config-add ref="MconfigAdd" @refresh="handleQuery"></m-config-add>

    </div>
</template>

<script setup>

import { getRuleList, deleteRule, exportRule } from "@/api/alert"
import { parseTime } from "@/utils/utils";
import mConfigAdd from './components/configAdd.vue'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance();

const pageInfo = reactive({
    pageNo: 1,
    pageSize: 10,
    total: 0
})
const form = reactive({
    ruleName: '',
    description: '',
    status: 1
})

const loading = ref(false)
const tableData = ref([])
const selectedList = ref([])
const multiple = ref(true)

const handleSelectionChange = (val) => {
    selectedList.value = val;
    multiple.value = val.length > 0 ? false : true;
}

// 获取列表数据
const handleQuery = () => {
    // TODO: 查询告警规则列表
    tableData.value = []
    loading.value = true
    getRuleList({
        pageNo: pageInfo.pageNo,
        pageSize: pageInfo.pageSize,
        ruleName: form.ruleName,
        description: form.description,
        status: form.status
    }).then(res => {
        tableData.value = res.data.list
        pageInfo.total = res.data.total
        loading.value = false
    })
}

// 编辑
const handleUpdate = (row) => {
    
    proxy.$refs.MconfigAdd.showDialog(row)
}

// 删除
const handleDelete = (row) => {
    ElMessageBox.confirm(
        `确定要删除告警规则【${row.ruleName}】吗？`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        handleDeleteList(row)
    }).catch(() => {
    })
}

// 重置表单
const resetQuery = () => {
    form.ruleName = ''
    form.description = ''
    form.status = 1
    pageInfo.pageNo = 1
    pageInfo.pageSize = 10
    handleQuery()
}

// 新增告警规则
const handleAdd = () => {
    proxy.$refs.MconfigAdd.showDialog()
}

// 批量删除告警规则
const handleDeleteList = (deleteData) => {
    const ids = []
    if(deleteData.id){
        ids.push(deleteData.id)
    }else{
        const _selectedList = selectedList.value;
        if(_selectedList.length === 0){
            proxy.$message.info('请选择要删除的告警规则');
            return;
        }
        ids.push(..._selectedList.map(item => item.id))
    }
    // console.log(ids)
    // return
    deleteRule(ids).then(() => {
        handleQuery()
    })
}

const bindPageSizeChange = (val) => {
    pageInfo.pageSize = val
    handleQuery()
}

const binfPageNoChange = (val) => {
    pageInfo.pageNo = val
    handleQuery()
}
// 导出告警规则
const handleExport = () => {
    exportRule({
        ruleName: form.ruleName,
        description: form.description,
        status: form.status,
        pageNo: pageInfo.pageNo,
        pageSize: pageInfo.pageSize,
    })
}

onMounted(async () => {
    await handleQuery()
})

</script>

<style lang="scss" scoped></style>